<template>
  <div class="location">
    <div style="display: flex;">
      <JInput size="small" @clear="clear" style="flex: 1;width: 100%;margin-right: 15px;" v-model="address" clearable  />
      <JButton  icon="location" size="small" :loading="loading" @click="toLocate">定位</JButton >
    </div>
  </div>
</template>

<script>
// 带定位的输入框
import tool from "@/utils/tool";
export default {
  props: {
    modelValue: {type: String, default: ''},
  },
  emits: ['update:modelValue', 'change'],
  data () {
    return {
      address: this.modelValue,
      state: {
        show: false,
        locateAddress: ''
      },
      loading: false,
    }
  },
  methods: {
    clear () {
      this.$emit('update:modelValue', null)
      this.$emit('change', null)
    },
    toLocate () {
      this.loading = true
      tool.getLngLat((obj) => {
        this.$emit('update:modelValue', obj.address)
        this.$emit('change', obj)
        this.loading = false
      })
    }
  },
  watch: {
    modelValue (val) {
      this.address = val
    }
  }
}

</script>

<style scoped lang="scss">
.location {
  width:100%;
  .wrapper {
    position: fixed;
    background-color: white;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    #amapContainer {
      position: absolute;
      bottom: 300px;
      left: 0;
      right: 0;
      top: 50px;
    }
    #panel {
      position: absolute;
      height: 35px;
      bottom: 330px;
      right: 10px;
      left: 10px;
    }
    .content {
      position: absolute;
      bottom: 0;
      padding: 5px;
      overflow-y: auto;
      left: 0;right: 0;
      height: 300px;
      .item {
        &:active {
          background-color: #aaaaaa;
        }
      }
    }
  }
}


</style>
